<template>
    <!-- 举报 评价-->
    <up-popup :show="showReport" mode="bottom" :round="20" closeable="true" @close="close">
        <view class="reportBox pd-20">
            <view class="ft1 flex-center"> 举报 </view>
            <view class="list mt-40 pd-20">
                <view class="ft c-33 fw-800">{{ "选择举报类型" }}</view>
                <view class="flex mt-20">
                    <view :class="{ active: selectedIndexes.includes(index) }" @click="toggleSelection(item, index)"
                        class="item pd-10 mr-20 ft c-66 flex-center" v-for="(item, index) in reportList" :key="index">
                        {{ item }}
                    </view>
                </view>
            </view>
            <view class="list text_box mt-40 pd-20">
                <view class="ft c-33 fw-800">{{ "输入举报内容" }}</view>
                <view class="flex mt-20">
                    <!-- <up-textarea v-model="reportValue" placeholder="请输入内容" count ></up-textarea> -->
                    <textarea style="height: 260rpx;"  class="ft-24 c-33" maxlength="-1" v-model="reportValue" placeholder="请输入内容" />
                </view>
            </view>
        </view>

        <view class="btn_box">

            <view class="btn auto mt-20 ft c-dbf flex-center" @click="subReport"> 提交 </view>
        </view>

    </up-popup>
</template>
<script setup lang="js">
import { utils } from "@/utils/utils.js";
import { api } from "@/utils/api.js";
import { onLoad } from "@dcloudio/uni-app";
import { ref, defineProps, defineEmits, onMounted } from "vue";
let prop = defineProps({ showReport: Boolean, reportId: String, reportType: String }
)
console.log(prop.reportType)
let emit = defineEmits(['closeReport'])
const reportList = ref([])
const selectedIndexes = ref([]);
const slectIdxVal = ref([])
const reportValue = ref('')
// 点击事件
const toggleSelection = (item, index) => {
    const indexOfIndex = selectedIndexes.value.indexOf(index);
    console.log('哈哈', item, index, indexOfIndex)
    if (indexOfIndex > -1) {
        // 如果已经选中，撤销选中
        selectedIndexes.value.splice(indexOfIndex, 1);
        slectIdxVal.value.splice(indexOfIndex, 1);
    } else {
        // 如果没有选中，添加到选中列表
        selectedIndexes.value.push(index);
        slectIdxVal.value.push(item)

    }
}
// 获取举报列表数据
const getReportList = () => {
    utils
        .request(
            api.getReportOptions,
            {

            },
            "post"
        )
        .then((res) => {
            reportList.value = res.data.options.type_list;
            console.log('举报列表', reportList.value)

        })
}

// 举报submit
const subReport = () => {

    utils
        .request(
            api.report
            ,
            {
                types: slectIdxVal.value,
                [prop.reportType]: prop.reportId,
                content: reportValue.value

            },
            "post",
            "application/x-www-form-urlencoded;charset=utf-8"
        )
        .then((res) => {
            if (res.code == 200)
                utils.toast('感谢您的举报，举报结果稍后反馈给您！');
            close()

        }).catch(res => {
            close()
        })
}

const close = () => {
    emit('closeReport')
    reportList.value = []
    selectedIndexes.value = []
    slectIdxVal.value = []
    reportValue.value = ''

}
onMounted(() => {
    console.log('我是巨擘onMounted')
    getReportList()

})

</script>
<style lang="scss" scoped>
.noData2 {
    &_item {
        background-color: #F8F8F8;

        &_bottom {
            background-color: #333;
        }
    }
}

.reportBox {
    // width: 60%;
    height: 800rpx;
    border-radius: 40rpx;
    background: #f8f8f8;

    .list {
        height: 230rpx;
        background: #fff;
        border-radius: 20rpx;

        .item {
            background: #fff5f3;
            border-radius: 20rpx;
        }

        .active {
            background: #333333;
            color: #dbf046;
        }
    }

    .text_box {
        height: 300rpx;
    }
}

.btn_box {
    padding: 0 30rpx;
    padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

    .btn {
        width: 100%;
        height: 78rpx;
        background: #333333;
        border-radius: 20rpx;

    }
}
</style>